﻿@page "/docs/components/tooltip"

<Seo Canonical="/docs/components/tooltip" Title="Blazorise Tooltip Component" Description="Learn to use and work with the Blazorise Tooltip component, which is useful for conveying information when a user hovers over an element." />

<DocsPageTitle Path="Components/Tooltip">
    Blazorise Tooltip component
</DocsPageTitle>

<DocsPageLead>
    Tooltips display additional information based on a specific action.
</DocsPageLead>

<DocsPageParagraph>
    The <Code Tag>Tooltip</Code> component is useful for conveying information when a user hovers over an element. When activated,
    tooltips display a text label identifying an element, such as a description of its function.
</DocsPageParagraph>

<DocsPageParagraph>
    <Alert Color="Color.Info" Visible>
        <AlertDescription>
            Starting with <Strong>v0.9.4</Strong>, Tooltip component is powered by <Blazorise.Link To="https://atomiks.github.io/tippyjs/" Target="Target.Blank">Tippy.js.</Blazorise.Link>
        </AlertDescription>
    </Alert>
</DocsPageParagraph>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicTooltipExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicTooltipExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Positions">
        You can use one of the following modifiers to change positions of the tooltip:
        <UnorderedList>
            <UnorderedListItem>
                Top
            </UnorderedListItem>
            <UnorderedListItem>
                Bottom
            </UnorderedListItem>
            <UnorderedListItem>
                Left
            </UnorderedListItem>
            <UnorderedListItem>
                Right
            </UnorderedListItem>
        </UnorderedList>
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TooltipPositionsExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TooltipPositionsExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Different trigger target">
        You may want the tooltip to appear at a different location from its trigger (event listeners) target.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TooltipTriggerTargetExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TooltipTriggerTargetExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="HTML Content">
        Your tooltip can also contain HTML.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TooltipWithHtmlExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TooltipWithHtmlExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Delay">
        Your Tooltip can delay hiding or showing after a trigger.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TooltipDelayExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TooltipDelayExample" />
</DocsPageSection>

<ComponentApiDocs ComponentTypes="[typeof(Tooltip)]" />